<template>
    <div>
        <div class="content white-block">
            <div class="toolbar">
                <div class="provider">
                    <el-select v-model="value" placeholder="请选择" class="mr10">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="input" placeholder="请输入关键字" class="mr10 input" @keyup.enter="query"></el-input>
                    <el-button type="primary" class="mr10" @click="getPage(1)">查询</el-button>
                </div>
                <div class="text-right">
                    <el-button type="primary" @click="newFlag = true">新建</el-button>
                </div>
            </div>

            <div class="table mt20">
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                               @row-click="handleClick"
                               :highLight="true"
                               @tabCurrentChange="tabCurrentChangeDetails"
                               class="mt20">
                    <template slot="status" slot-scope="scope">
                        <span v-if="scope.row.status == 0">注销</span>
                        <span v-if="scope.row.status == 1">在用</span>
                    </template>
                    <template slot="role" slot-scope="scope">
                        <span v-if="scope.row.role == 1">开发者</span>
                        <span v-if="scope.row.role == 2">监控者</span>
                        <span v-if="scope.row.role == 3">管理员</span>
                    </template>
                    <template slot="operation" slot-scope="scope">
                        <el-link type="primary" :underline="false" class="mr10" @click="update = true">编辑</el-link>
                        <el-link type="primary" :underline="false" class="mr10" @click="del">删除</el-link>
                        <el-link type="primary" :underline="false" class="mr10" @click="updatePassword = true">编辑密码
                        </el-link>

                    </template>
                </table-example>
                <page :data="page" v-if="page" class="mt30 page" @jumpPage="getPage"></page>
            </div>

        </div>
        <!--  新建-->
        <dialog-msk :show.sync="newFlag" ref="dialog1" :center="true" :width="'7rem'" :title="'用户信息维护'" @save="add"
                    :noEsc="false"
                    :noModal="false"
                    @cancel="addClose">
            <div>
                <el-form ref="addForm" :model="form" :rules="addRules" :label-width="'1.3rem'">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.username" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="联系方式" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="角色">
                        <el-select v-model="role" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in roleOpt"
                                :key="item.role"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" show-password placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" prop="againPassword">
                        <el-input v-model="form.againPassword" show-password placeholder="请输入"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>

        <!--  修改-->
        <dialog-msk :show.sync="update" ref="dialog1" :center="true" :width="'7rem'" :noEsc="false" :noModal="false"
                    :title="'用户信息维护'"
                    @save="userUpdate"
                    @cancel="close">
            <div>
                <el-form ref="updateForm" :model="updateForm" :rules="updateRules" :label-width="'1.3rem'">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="updateForm.username" :disabled="true" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="姓名" prop="pname">
                        <el-input v-model="updateForm.pname" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="联系方式" prop="pphone">
                        <el-input v-model="updateForm.pphone" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="角色">
                        <el-select v-model="role" placeholder="请选择" class="select mr10" :disabled="roleDis">
                            <el-option
                                v-for="item in roleOpt"
                                :key="item.role"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model="status" placeholder="请选择" class="select mr10">
                            <el-option
                                v-for="item in statusOpt"
                                :key="item.status"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!--                    <el-form-item label="新密码" prop="password">-->
                    <!--                        <el-input v-model="updateForm.password" placeholder="请输入"></el-input>-->
                    <!--                    </el-form-item>-->

                    <!--                    <el-form-item label="确认密码" prop="repeatPassword">-->
                    <!--                        <el-input v-model="repeatPassword" placeholder="请输入" show-password></el-input>-->
                    <!--                    </el-form-item>-->
                </el-form>
            </div>
        </dialog-msk>
        <!--  修改密码-->
        <dialog-msk :show.sync="updatePassword" ref="dialog1" :center="true" :width="'7rem'" :noEsc="false"
                    :noModal="false" :title="'编辑密码'"
                    @save="updatePasswoedForm"
                    @cancel="passwoedClose">
            <div>
                <el-form ref="updatePasswoedForm" :model="updatePasswordForm" :rules="updatePassWordRules"
                         :label-width="'1.3rem'">
                    <el-form-item label="新密码" prop="password">
                        <el-input v-model="updatePasswordForm.password" show-password placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" prop="repeatPassword">
                        <el-input v-model="updatePasswordForm.repeatPassword" placeholder="请输入"
                                  show-password></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
    </div>

</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            let patter = /^[a-zA-Z][a-zA-Z0-9_]*$/,
                account = (rule, value, callback) => {
                    if (value && !patter.test(value)) {
                        return callback(new Error('只能以字母开头,且只能包含字母数字和下划线'))
                    } else {
                        callback()
                    }
                },
                num = /^[0-9-]*$/,
                number = (rule, value, callback) => {
                    if (value && !num.test(value)) {
                        return callback(new Error('只能出现数字或者"-"'))
                    } else {
                        callback()
                    }
                },
                pass = /^(?![0-9a-z]+$)(?![0-9A-Z]+$)(?![0-9\W]+$)(?![a-z\W]+$)(?![a-zA-Z]+$)(?![A-Z\W]+$)[a-zA-Z0-9\W_]+$/,
                password = (rule, value, callback) => {
                    if (!pass.test(value)) {
                        return callback(new Error('数字、小写、大写、特殊字符，至少满足3个。'))
                    } else {
                        callback()
                    }
                }
            return {
                input: '',
                value: '',
                options: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '账号'
                    },
                    {
                        value: '2',
                        label: '姓名'
                    },
                    {
                        value: '3',
                        label: '电话'
                    }
                ],
                tableData: [],
                header: [
                    // {
                    //     prop: 'id',
                    //     label: '序号',
                    //     minWidth: '15%',
                    //     align: 'center'
                    // },
                    {
                        prop: 'username',
                        label: '账号',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'pname',
                        label: '姓名',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'pphone',
                        label: '联系方式',
                        minWidth: 120,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'role',
                        label: '角色',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'updateTime',
                        label: '修改时间',
                        minWidth: 120,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'status', 'role'],
                page: null,
                newFlag: false,
                update: false,
                form: {
                    name: '',
                    phone: '',
                    password: '',
                    againPassword: '',
                    username: ''
                },
                updateForm: {},
                updatePasswordForm: {},
                roleOpt: [
                    {
                        value: '1',
                        label: '开发者'
                    },
                    {
                        value: '2',
                        label: '监控者'
                    },
                    {
                        value: '3',
                        label: '管理员'
                    }
                ],
                status: '1',
                statusOpt: [
                    {
                        value: '1',
                        label: '在用'
                    },
                    {
                        value: '0',
                        label: '注销'
                    }
                ],
                role: '1',
                id: '',
                updatePassword: false,
                addRules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'},
                        {validator: account}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: false, message: '请输入联系方式', trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur'},
                        {validator: number}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
                        {validator: password}
                    ],
                    againPassword: [
                        {required: true, message: '请再次输入密码', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
                        {validator: password}
                    ]
                },
                updateRules: {
                    pname: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    pphone: [
                        {required: false, message: '请输入联系方式', trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur'},
                        {validator: number}
                    ]
                },
                updatePassWordRules: {
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
                        {validator: password}
                    ],
                    repeatPassword: [
                        {required: true, message: '请再次输入密码', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
                        {validator: password}
                    ]
                },
                userName: '',
                roleDis: false
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        created() {
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.getPage(1)
                }
            }
        },
        mounted() {
            if (this.$store.state.user.user.username === 'admin' || this.$store.state.user.user === 'admin') {
                this.roleDis = false
            } else {
                this.roleDis = true
            }
            this.userName = this.$store.state.user.user.username
            this.getData()
        },
        methods: {
            // 分页
            getPage(index) {
                if (index) this.index = index
                this.$http.get('/SUser/select', {
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value,
                    username: this.userName || this.$store.state.user.user
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            // 查询
            query() {
                this.$http.get('/SUser/select', {
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value,
                    username: this.userName || this.$store.state.user.user
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            getData() {
                this.$http.get('/SUser/select', {
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value,
                    username: this.userName || this.$store.state.user.user
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },

            // 修改用户信息
            userUpdate() {
                this.validate('updateForm', () => {
                    this.$http.get('/SUser/update', {
                        pName: this.updateForm.pname,
                        pPhone: this.updateForm.pphone,
                        role: this.role,
                        status: this.status,
                        username: this.updateForm.username
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.getData()
                            this.update = false
                        }
                    })
                })
            },

            // 修改密码
            updatePasswoedForm() {
                this.validate('updatePasswoedForm', () => {
                    this.$http.get('/SUser/updatePassword', {
                        username: this.username,
                        password: this.updatePasswordForm.password,
                        passwordRepeat: this.updatePasswordForm.repeatPassword
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.updatePassword = false
                        }
                    })
                })
            },

            // 新增
            add() {
                this.validate('addForm', () => {
                    this.$http.get('/SUser/insert', {
                        pName: this.form.name,
                        pPhone: this.form.phone,
                        password: this.form.password,
                        passwordRepeat: this.form.againPassword,
                        role: this.role,
                        username: this.form.username,
                        currentUser: this.userName || this.$store.state.user.user
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '新建成功!'
                            })
                            this.newFlag = false
                            this.getPage(1)
                            this.form = {}
                        }
                    })
                })
            },
            // 删除
            del() {
                this.$confirm('确定要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/SUser/delete', {
                        username: this.username
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getPage(1)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // 表格点击事件
            handleClick(row) {
                // console.log(row)
                this.$nextTick(() => {
                    this.username = row.username
                    this.id = row.id
                })
                this.$http.get('/SUser/selectOne', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        this.role = result.data.role
                        this.status = result.data.status
                        this.updateForm = result.data
                    }
                })
            },

            // 表格点击高亮
            tabCurrentChangeDetails(currentRowDetails, oldCurrentRowDetails) {
                this.currentRowDetails = currentRowDetails
            },
            tabCurrentChangeModify(currentRowModify, oldCurrentRowModify) {
                this.currentRowModify = currentRowModify
            },
            tabCurrentChangeQuery(currentRowQuery, oldCurrentRowQuery) {
                this.currentRowQuery = currentRowQuery
            },
            close() {
                this.update = false
                this.$refs.updateForm.resetFields()
            },
            passwoedClose() {
                this.updatePassword = false
                this.$refs.updatePasswoedForm.resetFields()
            },
            addClose() {
                this.newFlag = false
                this.$refs.addForm.resetFields()
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .content {
        width: 100%;
    }
</style>
